<template>
    <div class="roleManagement app-container">
        
        <el-container>
            <el-header>
                <div class="input_box">
                    <p>角色名称：</p>
                    <el-input v-model="searchRole" placeholder="请输入" size="small"></el-input>
                </div>
                <el-button type="primary" @click="searchRoleSubmit" size="small">搜 索</el-button>
                <el-button size="small" @click="roleSearchReset">重 置</el-button>
            </el-header>
            <el-main>
                <div class="btn_box">
                    <el-button type="primary" @click="addRoleLine" size="small">新 增</el-button>    
                </div>

                <el-table
                :data="tableList"
                height="640"
                :header-cell-style="{background:'#f5f7fa'}">
                <el-table-column label="角色名称" prop="role_name" align="center" width="150">
                </el-table-column>
                <el-table-column label="权限内容" prop="rule_name" align="center">
                </el-table-column>
                <el-table-column label="创建时间" prop="create_time" align="center">
                </el-table-column>
                <el-table-column label="操作" align="center" width="150">
                    <template slot-scope="scope">
                        <el-button class="table_btn" type="text" @click="modification(scope.row)">编辑</el-button>
                        <el-button class="table_btn" type="text" @click="remove(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
              </el-table>

              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page"
                :page-sizes="[7, 20, 30, 40]"
                :page-size="limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
            </el-main>
        </el-container>

        <roleDialogVue :roleTitle="roleTitle" :roleShowEdit="roleShowEdit" :rowObj="rowObj" @cancelHandle="cancelHandle" @saveSuc="saveSuc"/>
    </div>
</template>

<script>

import roleDialogVue from './roleDialog.vue';
import {roleList,roleDel} from '@/api/release'
export default {
name: 'roleManagement',
components:{
    roleDialogVue
},
data(){
    return{
        searchRole:'', //搜索角色名称输入框
        page:1,
        limit:10,
        total:0,
        tableList:[{
            address:"111"
        }],
        roleTitle:'',
        roleShowEdit:false,
        rowObj:{},
    }
},
mounted(){
    this.getList(this.searchRole);
},
methods:{
    getList(name){
        roleList({page:this.page,limit:this.limit,role_name:name}).then(res=>{
            this.tableList = res.data;
            this.total = res.count;
        });
    },
    //
    
    /**header-搜索按钮**/
    searchRoleSubmit(){
        if(this.searchRole){
            this.getList(this.searchRole);
        }
    },
    /**header-重置按钮**/ 
    roleSearchReset(){
        this.searchRole = null;
        this.getList(this.searchRole);
    },
    /**main-点击新增按钮**/
    addRoleLine(){
        this.roleTitle = '添加';
        this.roleShowEdit = true;
    },
    /**编辑**/
    modification(row){
        this.roleTitle = '编辑';
        this.roleShowEdit = true;
        this.rowObj = row;
    },
    /**删除**/
    remove(row){
        this.$confirm('确认是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await this.removeApi(row.id);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });


       
    },
    // 删除接口
    removeApi(id){
        roleDel({id:id}).then(res=>{
            this.$message({
                message: '删除成功',
                type: 'success'
            })
            this.getList(this.searchRole);
        });
    },
    /**dialog-取消**/
    cancelHandle(){
        this.roleShowEdit = false;
    },
    /**dialog-保存**/ 
    saveSuc(){
        this.roleShowEdit = false;
        this.getList(this.searchRole);
    },
    /**分页**/ 
    handleSizeChange(val) {
        this.limit = val
        this.list()
    },
    handleCurrentChange(val) {
        this.page = val
        this.list()
    },
}
}
</script>

<style lang="scss" scoped>
.roleManagement {
    .el-header{
        background-color: #fff;
        color: #333;
        text-align: center;
        height: 60px;
        display: flex;
        align-items: center;
        border-bottom: 4px solid #f5f6f7;
        .input_box{
            display: flex;
            align-items: center;
            margin-right: 20px;
            p{
                width: 120px;
                color: #606266;
                font-weight: 700;
                font-size: 14px;
            }
        }
    }
  
    .el-main {
        background-color: #fff;
        color: #333;
        .btn_box{
            margin-bottom: 10px;
        }
        .el-table{
            .el-button{
                padding: 0px 6px;
            }
        }
    }
}
</style>